<template>
  <div class="container">
    <el-page-header
      @back="goBack"
      title="通知公告"
      style="padding: 10px 20px"
    />
    <!--    通知详情信息部分-->
    <div class="details">
      <el-form :model="detailForm" label-width="120px" label-position="right">
        <el-form-item label="目标部门" prop="scopes">
          <el-tag
            size="small"
            style="margin-right: 5px"
            v-for="item in detailForm.scopes"
            :key="item.id"
            >{{ item.name }}</el-tag
          >
        </el-form-item>
        <el-form-item label="发布状态" prop="status">
          <el-tag
            :type="detailForm.status === '1' ? 'success' : 'warning'"
            size="small"
            >{{ detailForm.status === "1" ? "已发布" : "未发布" }}</el-tag
          >
        </el-form-item>
        <el-form-item label="发布时间" prop="publishTime">
          <span>{{ detailForm.publishTime }}</span>
        </el-form-item>
        <el-form-item label="正文">
          <MyEditor ref="editor" :value="detailForm.content"></MyEditor>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { detail } from "../../../api/message/notice";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
//引入富文本组件
import MyEditor from "../../../components/MyEditor";
const router = useRouter();
const route = useRoute();
const noticeId = ref("");
//表单数据
const detailForm = ref({});
function goBack() {
  router.back();
}
//获取详情信息
function getDetail() {
  detail(noticeId.value).then((res) => {
    detailForm.value = res.data;
  });
}
onMounted(() => {
  noticeId.value = route.query.id;
  getDetail();
});
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 220px);
  background: #ffffff;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  padding: 20px;
  overflow-y: auto;
  .details {
    padding: 20px;
  }
}
</style>
